<template>
	<div class="login-box">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>LOGIN</span>
			</div>
			<el-form :model="formData" :rules="rules" ref="form" label-width="50px">
				<el-form-item label="帐号" prop="username">
					<el-input v-model="formData.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="formData.password" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('form')">登录</el-button>
					<el-button @click="resetForm('form')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				formData: {
					username: '',
					password: ''
				},
				rules: {
					username: [{
						required: true,
						message: '请输入帐号'
					}],
					password: [{
						required: true,
						message: '请输入密码'
					}]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						sessionStorage.setItem('token', 'dandan');
						this.$router.push({path: '/'});
					} else {
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style scoped>
	.login-box {
		position: absolute;
		top: 40%;
		left: 50%;
		width: 400px;
		transform: translate(-50%, -50%);
	}
	
	@media (max-width: 767px) {
		.login-box {
			width: 90%;
		}
	}
</style>
